/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // 主色调 - 紫色系
        primary: {
          50: '#faf5ff',
          100: '#f3e8ff',
          200: '#e9d5ff',
          300: '#d8b4fe',
          400: '#c084fc',
          500: '#a855f7',
          600: '#9333ea',
          700: '#7c3aed',
          800: '#6b21a8',
          900: '#581c87',
        },
        // 背景色系 - 深色主题
        background: {
          50: '#f8fafc',
          100: '#f1f5f9',
          200: '#e2e8f0',
          300: '#cbd5e1',
          400: '#94a3b8',
          500: '#64748b',
          600: '#475569',
          700: '#334155',
          800: '#1e293b',
          900: '#0f172a',
          950: '#020617',
        },
        // 功能色
        success: '#10b981',
        warning: '#f59e0b',
        error: '#ef4444',
        info: '#3b82f6',
        'ai-generated': '#8b5cf6',
        fictional: '#ec4899',
        // 文字色
        text: {
          primary: '#f8fafc',
          secondary: '#cbd5e1',
          muted: '#64748b',
          inverse: '#0f172a',
        },
        // 滚动条
        scrollbar: {
          thumb: '#374151',
          track: 'transparent',
        }
      },
      fontFamily: {
        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
        display: ['Cinzel', 'serif'],
      },
      fontSize: {
        'xs': ['0.75rem', { lineHeight: '1rem' }],
        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
        'base': ['1rem', { lineHeight: '1.5rem' }],
        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      },
      spacing: {
        'xs': '0.25rem',
        'sm': '0.5rem',
        'md': '1rem',
        'lg': '1.5rem',
        'xl': '2rem',
        '2xl': '3rem',
        '3xl': '4rem',
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'fade-out': 'fadeOut 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
        'scale-in': 'scaleIn 0.2s ease-out',
        'film-rotate': 'filmRotate 2s linear infinite',
        'hologram': 'hologram 3s ease-in-out infinite',
        'neon-glow': 'neonGlow 2s ease-in-out infinite alternate',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        fadeOut: {
          '0%': { opacity: '1' },
          '100%': { opacity: '0' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        scaleIn: {
          '0%': { transform: 'scale(0.95)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        filmRotate: {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' },
        },
        hologram: {
          '0%, 100%': { opacity: '0.7', transform: 'translateY(0)' },
          '50%': { opacity: '1', transform: 'translateY(-5px)' },
        },
        neonGlow: {
          '0%': { 
            boxShadow: '0 0 2px #a855f7, 0 0 4px #a855f7, 0 0 6px #a855f7, 0 0 8px #a855f7',
            textShadow: '0 0 2px #a855f7'
          },
          '100%': { 
            boxShadow: '0 0 4px #a855f7, 0 0 8px #a855f7, 0 0 12px #a855f7, 0 0 16px #a855f7',
            textShadow: '0 0 4px #a855f7'
          },
        },
      },
      transitionDuration: {
        'fast': '150ms',
        'normal': '250ms',
        'slow': '350ms',
      },
      transitionTimingFunction: {
        'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
        'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
        'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
      },
      backdropBlur: {
        'xs': '2px',
      },
      boxShadow: {
        'neon': '0 0 2px #a855f7, 0 0 4px #a855f7, 0 0 6px #a855f7, 0 0 8px #a855f7',
        'neon-purple': '0 0 2px #8b5cf6, 0 0 4px #8b5cf6, 0 0 6px #8b5cf6, 0 0 8px #8b5cf6',
        'neon-pink': '0 0 2px #ec4899, 0 0 4px #ec4899, 0 0 6px #ec4899, 0 0 8px #ec4899',
        'hologram': '0 0 20px rgba(139, 92, 246, 0.3)',
      },
      borderRadius: {
        'xl': '12px',
        '2xl': '16px',
        '3xl': '24px',
      },
    },
  },
  plugins: [
    function({ addUtilities }) {
      const newUtilities = {
        '.scrollbar-thin': {
          scrollbarWidth: 'thin',
          '&::-webkit-scrollbar': {
            width: '4px',
          },
        },
        '.scrollbar-thumb-gray-600': {
          '&::-webkit-scrollbar-thumb': {
            backgroundColor: '#374151',
            borderRadius: '2px',
            '&:hover': {
              backgroundColor: '#4B5563',
            },
          },
        },
        '.scrollbar-track-gray-800': {
          '&::-webkit-scrollbar-track': {
            backgroundColor: 'transparent',
          },
        },
        '.scrollbar-hide': {
          '&::-webkit-scrollbar': {
            display: 'none',
          },
          scrollbarWidth: 'none',
          msOverflowStyle: 'none',
        },
        '.text-gradient': {
          background: 'linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%)',
          '-webkit-background-clip': 'text',
          '-webkit-text-fill-color': 'transparent',
          'background-clip': 'text',
        },
        '.bg-gradient-fictional': {
          background: 'linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%)',
        },
        '.bg-gradient-ai': {
          background: 'linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%)',
        },
        '.border-hologram': {
          border: '1px solid rgba(139, 92, 246, 0.3)',
          boxShadow: '0 0 10px rgba(139, 92, 246, 0.2)',
        },
        '.glass-effect': {
          background: 'rgba(30, 41, 59, 0.8)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
        },
        '.neon-sharp': {
          boxShadow: '0 0 1px #a855f7, 0 0 2px #a855f7, 0 0 3px #a855f7, 0 0 4px #a855f7, inset 0 0 1px rgba(168, 85, 247, 0.3)',
          textShadow: '0 0 1px #a855f7',
        },
        '.neon-sharp-purple': {
          boxShadow: '0 0 1px #8b5cf6, 0 0 2px #8b5cf6, 0 0 3px #8b5cf6, 0 0 4px #8b5cf6, inset 0 0 1px rgba(139, 92, 246, 0.3)',
          textShadow: '0 0 1px #8b5cf6',
        },
      }
      addUtilities(newUtilities)
    }
  ],
}